<template>
    <div>
        <h1 style="display: inline-block;margin-left: 20px;margin-top: 30px">点击切换维度：</h1>
        <el-button size="small" type="primary" round @click="byType()" icon="el-icon-position">行业</el-button>
        <el-button size="small" type="primary" round @click="byArea()" icon="el-icon-map-location">区域</el-button>
        <el-button size="small" type="primary" round @click="byOrg()" icon="el-icon-office-building">机构类别</el-button>
        <el-button size="small" type="primary" round @click="byDefault()" icon="el-icon-refresh-left">恢复默认</el-button>

        <el-dialog title="运行指数模型" :visible.sync="dialogTableVisible">
            <!--<div  class="report" style="color: aliceblue;height: 400px">-->
            <div id="printJS-form"
                 v-watermark="{text:'企业标准信息公共服务平台',textColor:'rgba(180, 180, 180, 0.3)',font:'25px Microsoft JhengHei'}">

                <h1 style="text-align: center">
                    企业[{{this.orgInfo.orgName}}]({{this.orgInfo.orgArea}}/{{this.orgInfo.busiType}}/{{this.orgInfo.orgType}})运行指数简报</h1>

                <el-row>
                    <el-col :span="12">
                        <sapn v-for="(name,index) in myObject.nameList">
                    <span style="margin-top: 10px;margin-left: 30px;display: block">
                        {{name.name}}：{{myObject.dataInfo[index]}}
                    </span>
                        </sapn>
                    </el-col>
                    <el-col :span="12"><span style="margin-top: 10px;margin-left: 30px;display:block;font-weight: bold">运行指数：{{this.runningIndex}}</span>
                        <span style="margin-top: 10px;margin-left: 30px;display:block;font-weight: bold">行业排名：{{this.ranks.userRankByBusiType}}</span>
                        <span style="margin-top: 10px;margin-left: 30px;display:block;font-weight: bold">区域排名：{{this.ranks.userRankByOrgArea}}</span>
                        <span style="margin-top: 10px;margin-left: 30px;display:block;font-weight: bold">机构类别排名：{{this.ranks.userRankByOrgType}}</span>
                        <span style="margin-top: 10px;margin-left: 30px;display:block;font-weight: bold;margin-bottom: 30px">全国企业排名：{{this.ranks.userRank}}</span>
                    </el-col>
                </el-row>
                <span>-----------------------------------------------------------------------------------------------------
                    <h1 style="margin-left: 30px;font-weight: bolder;color: chocolate">注意：风险指数过高！</h1>
            </span></div>
            <!--</div>-->

            <el-button style="margin-top: 30px;margin-left: 520px;padding: 10px 35px" size="small" type="primary" round
                       @click="CreateOneFormPage" icon="el-icon-download">打印
            </el-button>
        </el-dialog>
        <el-button style="float: right;margin-top:30px;margin-right: 30px;color: black"
                   @click="dialogTableVisible = true" icon="el-icon-document">生成并下载简版报告
        </el-button>

        <el-row :gutter="20" style="margin-top: 30px">
            <el-col :span="12">
                <el-card :header="header" style="font-weight: bold;">
                    <div ref="orgRunningIndex" style="width: 600px; height: 400px"></div>
                </el-card>
            </el-col>
            <el-col :span="12">
                <el-card header="细分指数" style="font-weight: bold;">
                    <div ref="detail" style="width: 600px; height: 400px"></div>
                </el-card>
            </el-col>
        </el-row>


    </div>
</template>

<script>
    import print from 'print-js'

    import {getData, getDataRank} from "../../../api/paperMG";

    export default {
        name: "org-data",
        data() {
            return {
                header: '',
                myObject: {
                    dataInfo: [],
                    nameList: []
                },
                avgObject: {
                    dataInfo: [],
                    nameList: []
                },
                orgInfo: {},
                ranks: {
                    userRankByOrgType: '',
                    userRankByBusiType: '',
                    userRankByOrgArea: '',
                    userRank: ''
                },
                runningIndex: 0,
                dialogTableVisible: false,
                dialogFormVisible: false,

            };

        },
        methods: {
            /**
             * 打印
             */
            CreateOneFormPage() {
                // 此处的style即为打印时的样式

                print({
                    printable: 'printJS-form',
                    type: 'html',
                    header: '指数简报',
                    headerStyle: 'text-align:center;;width:100%;',
                    targetStyles: ['border', 'padding: 15px'],
                    scanStyles: false,
                    src: '../../../assets/img/dialog.jpg',
                    style: 'table tr td,th { border-collapse: collapse;padding: 15px;border:1px #000 solid; }' // 表格样式
                })
            },
            // 行业
            byType() {
                let _this = this;
                let info = {
                    flag: "BUSITYPE",
                    token: localStorage.getItem("JWT_TOKEN"),
                    remark: "1"
                };
                getData(info).then(res => {
                    this.myObject.nameList = res.data.myObject.nameList;
                    this.myObject.dataInfo = res.data.myObject.indexList;
                    this.avgObject.dataInfo = res.data.avgObject.indexList;
                    this.runningIndex = res.data.myObject.runningIndex;
                    console.log(" this.avgObject==>", this.avgObject);
                    console.log(" this.myObject==>", this.myObject);
                    console.log(" this.runningIndex==>", this.runningIndex);
                    console.log("赋值完成+++++++++++++++")
                    if (res.code === 200) {
                        let myChart = this.$echarts.init(this.$refs.detail);
                        myChart.setOption({
                            legend: {
                                data: ['全国平均指数', '本企业指数'],
                                left: '3%'
                            },
                            radar: {
                                indicator: this.myObject.nameList
                            },
                            series: [{
                                type: 'radar',
                                data: [
                                    {
                                        value: this.myObject.dataInfo,
                                        name: '本企业指数',
                                    },
                                    {
                                        value: this.avgObject.dataInfo,
                                        name: '全国平均指数',
                                    }
                                ]
                            }]
                        });
                    }
                });

                // 获取指数数据
                getDataRank(info).then(res => {
                    console.log("==========res==========");
                    console.log(res);
                    _this.ranks = res.data;
                    if (res.code === 200) {
                        let myChart1 = _this.$echarts.init(this.$refs.orgRunningIndex);
                        myChart1.setOption({
                            legend: {
                                data: ['区间企业数'],
                                left: '3%'
                            },
                            tooltip: {
                                trigger: 'axis',
                                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                                    type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                                }
                            },
                            grid: {
                                left: '3%',
                                right: '7%',
                                bottom: '3%',
                                containLabel: true
                            },
                            xAxis: [
                                {
                                    type: 'category',
                                    data: ['0-30 ', '31-35 ', '36-40 ', '41-45 ', '46-50 ', '51-55 ', '56-75 ', '75-100 '],
                                    axisTick: {
                                        alignWithLabel: true
                                    }
                                }
                            ],
                            yAxis: [
                                {
                                    axisLabel: {formatter: '{value}'},
                                    type: 'value'
                                }
                            ],
                            series: [
                                {
                                    name: '区间企业数',
                                    type: 'bar',
                                    barWidth: '60%',

                                    data: [{
                                        value: this.ranks.jsonObjectBusiType.range0_30,
                                        itemStyle: {}
                                    }, {
                                        value: this.ranks.jsonObjectBusiType.range31_35,
                                    }, {
                                        value: this.ranks.jsonObjectBusiType.range36_40,
                                    }, {
                                        value: this.ranks.jsonObjectBusiType.range41_45,
                                    }, {
                                        value: this.ranks.jsonObjectBusiType.range46_50,
                                    }, {
                                        value: this.ranks.jsonObjectBusiType.range51_55,
                                    }, {
                                        value: this.ranks.jsonObjectBusiType.range56_75,
                                    }, {
                                        value: this.ranks.jsonObjectBusiType.range76_100,
                                    }]
                                },
                            ]
                        },);
                    }
                });// 获取排行、分值数量数据
            },
            // 区域
            byArea() {
                let _this = this;
                let info = {
                    flag: "ORGAREA",
                    token: localStorage.getItem("JWT_TOKEN"),
                    remark: "1"
                };
                getData(info).then(res => {
                    this.myObject.nameList = res.data.myObject.nameList;
                    this.myObject.dataInfo = res.data.myObject.indexList;
                    this.avgObject.dataInfo = res.data.avgObject.indexList;
                    this.runningIndex = res.data.myObject.runningIndex;
                    console.log(" this.avgObject==>", this.avgObject);
                    console.log(" this.myObject==>", this.myObject);
                    console.log(" this.runningIndex==>", this.runningIndex);
                    if (res.code === 200) {
                        let myChart = this.$echarts.init(this.$refs.detail);
                        myChart.setOption({
                            legend: {
                                data: ['全国平均指数', '本企业指数'],
                                left: '3%'
                            },
                            radar: {
                                indicator: this.myObject.nameList
                            },
                            series: [{
                                type: 'radar',
                                data: [
                                    {
                                        value: this.myObject.dataInfo,
                                        name: '本企业指数',
                                    },
                                    {
                                        value: this.avgObject.dataInfo,
                                        name: '全国平均指数',
                                    }
                                ]
                            }]
                        });
                    }
                });
                getDataRank(info).then(res => {
                    console.log("==========res==========");
                    console.log(res);
                    _this.ranks = res.data;
                    if (res.code === 200) {
                        let myChart1 = _this.$echarts.init(this.$refs.orgRunningIndex);
                        myChart1.setOption({
                            legend: {
                                data: ['区间企业数'],
                                left: '3%'
                            },
                            tooltip: {
                                trigger: 'axis',
                                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                                    type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                                }
                            },
                            grid: {
                                left: '3%',
                                right: '7%',
                                bottom: '3%',
                                containLabel: true
                            },
                            xAxis: [
                                {
                                    type: 'category',
                                    data: ['0-30 ', '31-35 ', '36-40 ', '41-45 ', '46-50 ', '51-55 ', '56-75 ', '75-100 '],
                                    axisTick: {
                                        alignWithLabel: true
                                    }
                                }
                            ],
                            yAxis: [
                                {
                                    axisLabel: {formatter: '{value}'},
                                    type: 'value'
                                }
                            ],
                            series: [
                                {
                                    name: '区间企业数',
                                    type: 'bar',
                                    barWidth: '60%',

                                    data: [{
                                        value: this.ranks.jsonObjectOrgArea.range0_30,
                                        itemStyle: {}
                                    }, {
                                        value: this.ranks.jsonObjectOrgArea.range31_35,
                                    }, {
                                        value: this.ranks.jsonObjectOrgArea.range36_40,
                                    }, {
                                        value: this.ranks.jsonObjectOrgArea.range41_45,
                                    }, {
                                        value: this.ranks.jsonObjectOrgArea.range46_50,
                                    }, {
                                        value: this.ranks.jsonObjectOrgArea.range51_55,
                                    }, {
                                        value: this.ranks.jsonObjectOrgArea.range56_75,
                                    }, {
                                        value: this.ranks.jsonObjectOrgArea.range76_100,
                                    }]
                                },
                            ]
                        },);
                    }
                });
            },
            // 企业类型
            byOrg() {
                let _this = this;
                let info = {
                    flag: "ORGTYPE",
                    token: localStorage.getItem("JWT_TOKEN"),
                    remark: "1"
                };
                getData(info).then(res => {
                    this.myObject.nameList = res.data.myObject.nameList;
                    this.myObject.dataInfo = res.data.myObject.indexList;
                    this.avgObject.dataInfo = res.data.avgObject.indexList;
                    this.runningIndex = res.data.myObject.runningIndex;
                    console.log(" this.avgObject==>", this.avgObject);
                    console.log(" this.myObject==>", this.myObject);
                    console.log(" this.runningIndex==>", this.runningIndex);
                    if (res.code === 200) {
                        let myChart = this.$echarts.init(this.$refs.detail);
                        myChart.setOption({
                            legend: {
                                data: ['全国平均指数', '本企业指数'],
                                left: '3%'
                            },
                            radar: {
                                indicator: this.myObject.nameList
                            },
                            series: [{
                                type: 'radar',
                                data: [
                                    {
                                        value: this.myObject.dataInfo,
                                        name: '本企业指数',
                                    },
                                    {
                                        value: this.avgObject.dataInfo,
                                        name: '全国平均指数',
                                    }
                                ]
                            }]
                        });
                    }
                });
                getDataRank(info).then(res => {
                    console.log("==========res==========");
                    console.log(res);
                    _this.ranks = res.data;
                    if (res.code === 200) {
                        let myChart1 = _this.$echarts.init(this.$refs.orgRunningIndex);
                        myChart1.setOption({
                            legend: {
                                data: ['区间企业数'],
                                left: '3%'
                            },
                            tooltip: {
                                trigger: 'axis',
                                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                                    type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                                }
                            },
                            grid: {
                                left: '3%',
                                right: '7%',
                                bottom: '3%',
                                containLabel: true
                            },
                            xAxis: [
                                {
                                    type: 'category',
                                    data: ['0-30 ', '31-35 ', '36-40 ', '41-45 ', '46-50 ', '51-55 ', '56-75 ', '75-100 '],
                                    axisTick: {
                                        alignWithLabel: true
                                    }
                                }
                            ],
                            yAxis: [
                                {
                                    axisLabel: {formatter: '{value}'},
                                    type: 'value'
                                }
                            ],
                            series: [
                                {
                                    name: '区间企业数',
                                    type: 'bar',
                                    barWidth: '60%',

                                    data: [{
                                        value: this.ranks.jsonObjectOrgType.range0_30,
                                        itemStyle: {}
                                    }, {
                                        value: this.ranks.jsonObjectOrgType.range31_35,
                                    }, {
                                        value: this.ranks.jsonObjectOrgType.range36_40,
                                    }, {
                                        value: this.ranks.jsonObjectOrgType.range41_45,
                                    }, {
                                        value: this.ranks.jsonObjectOrgType.range46_50,
                                    }, {
                                        value: this.ranks.jsonObjectOrgType.range51_55,
                                    }, {
                                        value: this.ranks.jsonObjectOrgType.range56_75,
                                    }, {
                                        value: this.ranks.jsonObjectOrgType.range76_100,
                                    }]
                                },
                            ]
                        },);
                    }
                });

            },
            // 默认
            byDefault() {
                let _this = this;
                let info = {
                    flag: "DEFALUT",
                    token: localStorage.getItem("JWT_TOKEN"),
                    remark: "1"
                };
                getData(info).then(res => {
                    this.myObject.nameList = res.data.myObject.nameList;
                    this.myObject.dataInfo = res.data.myObject.indexList;
                    this.avgObject.dataInfo = res.data.avgObject.indexList;
                    this.runningIndex = res.data.myObject.runningIndex;
                    console.log(" this.avgObject==>", this.avgObject);
                    console.log(" this.myObject==>", this.myObject);
                    console.log(" this.runningIndex==>", this.runningIndex);
                    if (res.code === 200) {
                        let myChart = this.$echarts.init(this.$refs.detail);
                        myChart.setOption({
                            legend: {
                                data: ['全国平均指数', '本企业指数'],
                                left: '3%'
                            },
                            radar: {
                                indicator: this.myObject.nameList
                            },
                            series: [{
                                type: 'radar',
                                data: [
                                    {
                                        value: this.myObject.dataInfo,
                                        name: '本企业指数',
                                    },
                                    {
                                        value: this.avgObject.dataInfo,
                                        name: '全国平均指数',
                                    }
                                ]
                            }]
                        });
                    }
                });
                getDataRank(info).then(res => {
                    console.log("==========res==========");
                    console.log(res);
                    _this.ranks = res.data;
                    if (res.code === 200) {
                        let myChart1 = _this.$echarts.init(this.$refs.orgRunningIndex);
                        myChart1.setOption({
                            legend: {
                                data: ['区间企业数'],
                                left: '3%'
                            },
                            tooltip: {
                                trigger: 'axis',
                                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                                    type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                                }
                            },
                            grid: {
                                left: '3%',
                                right: '7%',
                                bottom: '3%',
                                containLabel: true
                            },
                            xAxis: [
                                {
                                    type: 'category',
                                    data: ['0-30 ', '31-35 ', '36-40 ', '41-45 ', '46-50 ', '51-55 ', '56-75 ', '75-100 '],
                                    axisTick: {
                                        alignWithLabel: true
                                    }
                                }
                            ],
                            yAxis: [
                                {
                                    axisLabel: {formatter: '{value}'},
                                    type: 'value'
                                }
                            ],
                            series: [
                                {
                                    name: '区间企业数',
                                    type: 'bar',
                                    barWidth: '60%',

                                    data: [{
                                        value: this.ranks.jsonObjectUser.range0_30,
                                        itemStyle: {}
                                    }, {
                                        value: this.ranks.jsonObjectUser.range31_35,
                                    }, {
                                        value: this.ranks.jsonObjectUser.range36_40,
                                    }, {
                                        value: this.ranks.jsonObjectUser.range41_45,
                                    }, {
                                        value: this.ranks.jsonObjectUser.range46_50,
                                    }, {
                                        value: this.ranks.jsonObjectUser.range51_55,
                                    }, {
                                        value: this.ranks.jsonObjectUser.range56_75,
                                    }, {
                                        value: this.ranks.jsonObjectUser.range76_100,
                                    }]
                                },
                            ]
                        },);
                    }
                });
            },
        },
        created() {
            let _this = this;
            let info = {
                flag: "DEFALUT",
                token: localStorage.getItem("JWT_TOKEN"),
                remark: "1"
            };
            console.log("=======开始调用getData=======")
            getData(info).then(res => {
                _this.myObject.nameList = res.data.myObject.nameList;
                _this.myObject.dataInfo = res.data.myObject.indexList;
                _this.avgObject.dataInfo = res.data.avgObject.indexList;
                _this.runningIndex = res.data.myObject.runningIndex;
                _this.orgInfo = res.data;
                _this.header = '运行指数 - 我的指数：' + _this.runningIndex;
                console.log(" this.avgObject==>", _this.avgObject);
                console.log(" this.myObject==>", _this.myObject);
                console.log(" this.runningIndex==>", _this.runningIndex);
                console.log(" this.orgInfo==>", _this.orgInfo);
                if (res.code === 200) {
                    let myChart = this.$echarts.init(this.$refs.detail);
                    myChart.setOption({
                        legend: {
                            data: ['全国平均指数', '本企业指数'],
                            left: '3%'
                        },
                        radar: {
                            indicator: this.myObject.nameList
                        },
                        series: [{
                            type: 'radar',
                            data: [
                                {
                                    value: this.myObject.dataInfo,
                                    name: '本企业指数',
                                },
                                {
                                    value: this.avgObject.dataInfo,
                                    name: '全国平均指数',
                                }
                            ]
                        }]
                    });
                }
            }); // 注入雷达组件
            console.log("=======开始调用getDataRank=======")
            getDataRank(info).then(res => {
                console.log("==========info==========");
                console.log(info);
                _this.ranks = res.data;
                if (res.code === 200) {
                    let myChart1 = _this.$echarts.init(this.$refs.orgRunningIndex);
                    myChart1.setOption({
                        legend: {
                            data: ['区间企业数'],
                            left: '3%'
                        },
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                            }
                        },
                        grid: {
                            left: '3%',
                            right: '7%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: [
                            {
                                type: 'category',
                                data: ['0-30 ', '31-35 ', '36-40 ', '41-45 ', '46-50 ', '51-55 ', '56-75 ', '75-100 '],
                                axisTick: {
                                    alignWithLabel: true
                                }
                            }
                        ],
                        yAxis: [
                            {
                                axisLabel: {formatter: '{value}'},
                                type: 'value'
                            }
                        ],
                        series: [
                            {
                                name: '区间企业数',
                                type: 'bar',
                                barWidth: '60%',

                                data: [{
                                    value: this.ranks.jsonObjectUser.range0_30,
                                    itemStyle: {}
                                }, {
                                    value: this.ranks.jsonObjectUser.range31_35,
                                }, {
                                    value: this.ranks.jsonObjectUser.range36_40,
                                }, {
                                    value: this.ranks.jsonObjectUser.range41_45,
                                }, {
                                    value: this.ranks.jsonObjectUser.range46_50,
                                }, {
                                    value: this.ranks.jsonObjectUser.range51_55,
                                }, {
                                    value: this.ranks.jsonObjectUser.range56_75,
                                }, {
                                    value: this.ranks.jsonObjectUser.range76_100,
                                }]
                            },
                        ]
                    },);
                }
            }); // 注入柱状组件
        },

        destroyed() {
            window.removeEventListener('resize', this.initEchart, 20); // 图表自适应导致报错，离开组件清除即可
        }
    };
</script>

<style scoped>

    .report {
        background-image: url("../../../assets/img/dialog.jpg");
    }

</style>